<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/header::head-fragment"></head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-toolbar clearfix">
          <form class="pull-right search-bar" method="get" action="#!" role="form">
            <div class="input-group">
              <div class="input-group-btn">
                <input type="hidden" name="search_field" id="search-field" value="title">
                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                 分类名称 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">分类名称</a> </li>
                </ul>
              </div>
              <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
            </div>
          </form>
          <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" th:href="@{/admin/type/add}"><i class="mdi mdi-plus"></i> 新增</a>
            <a class="btn btn-danger" ><i class="mdi mdi-window-close"></i> 删除</a>
          </div>
        </div>

        <div class="card-body">
          <div th:unless="${#strings.isEmpty(message)}">
            <div class="alert alert-danger alert-dismissible" role="alert" th:if="${message == false}">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <strong>操作提示: </strong><span th:text="${message}"></span>
            </div>
             <div class="alert alert-success alert-dismissible" role="alert" th:if="${success == true}">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>操作提示: </strong> <span th:text="${message}"></span>
             </div>
          </div>
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>
                    <label class="lyear-checkbox checkbox-primary">
                      <input type="checkbox" id="check-all"><span></span>
                    </label>
                  </th>
                  <th>编号</th>
                  <th>分类名称</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="type : ${typePage.list}">
                  <td>
                    <label class="lyear-checkbox checkbox-primary">
                      <input type="checkbox" name="ids[]" th:value="${type.id}"><span></span>
                    </label>
                  </td>
                  <td th:text="${type.id}"></td>
                  <td th:text="${type.name}"></td>
                  <td th:switch="${type.state}">
                      <font th:case="0" class="text-danger">禁用</font>
                      <font th:case="1" class="text-success">启用</font>
                  </td>
                  <td>
                    <div class="btn-group">
                      <a class="btn btn-xs btn-default" th:href="@{/admin/type/update/{id}(id=${type.id})}" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                      <a class="btn btn-xs btn-default" th:href="@{/admin/type/delete/{id}(id=${type.id})}" title="删除" ><i class="mdi mdi-window-close"></i></a>
                    </div>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
          <ul class="pagination">
            <li ><a th:href="@{/admin/types(pageNum=${typePage.prePage})}" th:unless="${typePage.isFirstPage}">«</a></li>
            <li class="active"><a href="#1"><span th:text="${typePage.pageNum}"></span></a></li>
            <li th:if="${typePage.nextPage}"><a th:href="@{/admin/types(pageNum=${typePage.nextPage})}"><span th:text="${typePage.nextPage}"></span></a></li>
            <li class="disabled" th:if="${typePage.hasNextPage}"><span>...</span></li>
            <li><span>总页数: <a th:text="${typePage.pages}"></a></span></li>
            <li><a th:href="@{/admin/types(pageNum=${typePage.nextPage})}" th:unless="${typePage.isLastPage}">»</a></li>
          </ul>

        </div>
      </div>
    </div>

  </div>

</div>

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/admin/js/main.min.js}"></script>
<script type="text/javascript">
$(function(){
    $('.search-bar .dropdown-menu a').click(function() {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });
});
</script>
</body>
</html>